<template>
  <div class="home">
    <el-title :title="title"></el-title>
    <div class="task_cn">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane v-for="(item, i) in ctypeDate" :key="i" :label="item.name + '(' + item.num + ')'" :name="item.index">
          <el-task @child-total="childToatl" :ctype="item.ctype" :elTaskTitle='elTaskTitle'></el-task>
        </el-tab-pane>
        <!-- <el-tab-pane label="全部" name="first">
            <el-task></el-task>
          </el-tab-pane> -->
        <!-- <el-tab-pane label="已处理" name="second">
            <el-task :ctype="ctype1"></el-task>
          </el-tab-pane>
          <el-tab-pane label="未处理" name="third">
            <el-task :ctype="ctype2"></el-task>
          </el-tab-pane>
          <el-tab-pane label="退回" name="six">
            <el-task :ctype="ctype3"></el-task>
          </el-tab-pane>
          <el-tab-pane label="已评价" name="seven">
            <el-task :ctype="ctype4"></el-task>
          </el-tab-pane> -->
      </el-tabs>
    </div>
  </div>
</template>

<script>
import elTitle from '@/components/title'
import elTask from '@/components/task/task_table'
import { projecList } from '@/utils/index.js'

export default {
  data() {
    return {
      title: '接收列表',
      activeName: 'first',
      // ctype1:'Under_review',
      // ctype2:'To_audit',
      // ctype3:'return',
      // ctype4:'comment',
      num: [],
      ctypeDate: [
        { ctype: '', num: '', name: '全部', index: 'first' },
        { ctype: 'Under_review', num: '', name: '处理中', index: 'second' },
        { ctype: 'To_audit', num: '', name: '未处理', index: 'third' },
        { ctype: 'return', num: '', name: '退回', index: 'four' },
        { ctype: 'completed', num: '', name: '已完成', index: 'five' },
        // { ctype: 'comment', num: '', name: '已评价', index: 'sex' },
      ],
      elTaskTitle:""
    }
  },
  components: {
    elTitle,
    elTask,
  },
  created() {
    this.ctypeDate.forEach((item, index) => {
      projecList({
        ctype: item.ctype,
      }).then((res) => {
        this.ctypeDate[index].num = res.data.total
      })
    })
    // 接收数据
    let data=this.$route.query
    // 判断是否携带参数
    if(data.title){
      this.elTaskTitle=data.title
    }
  },
  methods: {
    childToatl(val) {
      this.num.push({ num: val.num })
      console.log(val)
      // this.ctypeDate.forEach((item,index)=>{
      //   console.log(item)
      //   if(item.num == '' && this.num[index] != undefined && item.ctype == val.ctype){
      //     this.ctypeDate[index].num = this.num[index].num
      //   }
      // })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
  },
}
</script>

<style lang="scss" >
.task_cn {
  background-color: white;
  margin-top: 20px;
  padding: 20px 25px;
  .is-top {
    padding: 0 7px;
  }
  .el-tabs__item {
    padding: 0 20px;
  }
  .el-tabs__header {
    margin-bottom: 25px;
  }
}
</style>
